<template>
  <view class="app-container">
    <view class="title-padding"></view>
    <pickable-nav-bar left-icon="back">
      <view slot="right">
        <view class="right-area flex align-center justify-end">
          <picker
            mode="multiSelector"
            @columnchange="onCateChange"
            :value="cateChooseList"
            :range="cpCategoryList"
            range-key="name"
          >
            <view>
              {{ cpCategoryList[0][cateChooseList[0]].name }}
              {{ cpCategoryList[1][cateChooseList[1]].name }}
            </view>
          </picker>
          <view class="picker-suffix-icon">
            <image mode="widthFix" src="../../static/form/choose.png" />
          </view>
        </view>
      </view>
    </pickable-nav-bar>
    <filter-tab-bar
      :tabs="tabsData"
      @ontap="onFilterTabChange"
      class="affix-filter-tab bg-white"
      align="left"
    ></filter-tab-bar>
    <scroll-view scroll-y="true" class="scroll-h">
      <loveable-k-card
        :numbers="item.zuhe.split(',')"
        :kData="item.yilouK"
        v-for="(item, index) in dataList"
        :key="index"
      ></loveable-k-card>
    </scroll-view>
  </view>
</template>

<script>
import PickableNavBar from '@/components/pickableNavBar/navbar.vue'
import {
  getFavCpCategoryList,
  getRecommendPlan,
  getRecList,
} from '../../api/stars.js'
import LoveableKCard from '../../components/loveableKCard/card.vue'
import FilterTabBar from '../../components/affixTabBar/tabbar.vue'
import { tabConst1 } from '../../consts/index.js'

export default {
  components: { PickableNavBar, LoveableKCard, FilterTabBar },
  data() {
    return {
      tabsData: tabConst1,
      listQuery: {
        caipiao_id: null,
        qihao: 50,
        maChu: null,
        maQuantity: null,
        page: 1,
      },
      cateChooseList: [0, 0],
      cpCategoryList: [
        [
          {
            name: '江苏',
            id: '1',
          },
        ],
        [
          {
            name: '50期',
            id: 50,
          },
        ],
      ],
      dataList: [],
    }
  },
  created() {
    this.getFavCateList()
  },
  methods: {
    getFavCateList() {
      getFavCpCategoryList().then(res => {
        if (res.code === 1 && res.data) {
          let resList = []
          resList = res.data.map(data => {
            return {
              id: data.c_id,
              name: data.c_name,
            }
          })
          this.$set(this.cpCategoryList, 0, resList)
          this.$set(this.cpCategoryList, 1, [
            { value: 50, name: '50期' },
            { value: 100, name: '100期' },
            { value: 200, name: '200期' },
            { value: 400, name: '400期' },
            { value: 1000, name: '1000期' },
            { value: 2000, name: '2000期' },
            // { value: 5000, name: '5000期' },
          ])
          this.listQuery.caipiao_id = this.cpCategoryList[0][
            this.cateChooseList[0]
          ].id
          this.listQuery.qihao = this.cpCategoryList[1][
            this.cateChooseList[1]
          ].value
          this.getList()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
        if (res.data.length === 0) {
          uni.navigateTo({
            url: '/pages/stars/index',
          })
        }
      })
    },
    getList() {
      getRecList(this.listQuery).then(res => {
        if (res.code === 1 && Array.isArray(res.data)) {
          this.dataList = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    onCateChange(e) {
      this.$set(this.cateChooseList, e.detail.column, e.detail.value)
      this.listQuery.caipiao_id = this.cpCategoryList[0][
        this.cateChooseList[0]
      ].id
      this.listQuery.qihao = this.cpCategoryList[1][
        this.cateChooseList[1]
      ].value
      this.getList()
    },
    onFilterTabChange(e) {
      console.log(e)
    },
  },
  onLoad(query) {
    this.$set(this.listQuery, 'caipiao_id', query.caipiao_id)
    this.$set(this.listQuery, 'maChu', query.maChu)
    this.$set(this.listQuery, 'maQuantity', query.maQuantity)
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.app-container {
  background-color: #f9faff;
  width: 100%;
  height: 100vh;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  // border: 1px solid blue;
  .right-area {
    width: 400upx;
  }
  .picker-main {
    width: 100upx;
  }
  .picker-suffix-icon {
    height: 28upx;
    margin-left: 22upx;
    line-height: 28upx;
    uni-image {
      width: 22upx;
      height: 28upx;
    }
  }
  .affix-filter-tab.tab-container {
    height: 60upx;
    /deep/ .uni-tab-item {
      height: 60upx;
      line-height: 60upx;
    }
    /deep/ .uni-tab-item-title {
      height: 60upx;
      line-height: 60upx;
      font-size: 24upx;
    }
    /deep/ .uni-tab-item-title-active {
      height: 60upx;
      line-height: 60upx;
      font-size: 28upx;

      &::after {
        content: '';
        width: 28upx;
        height: 8upx;
        background-color: #149eff;
        position: absolute;
        bottom: -16upx;
        left: 50%;
        border-radius: 4upx;
        margin-left: -14upx;
      }
    }
  }
  .scroll-h {
    height: calc(100vh - 88upx - 80upx);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top) - 88upx - 80upx);
    /* #endif */
    padding-bottom: 28upx;
  }
}
</style>
